<template>
    <view class="skill-section-wrap">
        <view class="skill-text">
            {{content}}
        </view>
        <view class="skill-tabHead">
            <view v-for="(item,index) in segmentList" :key="index"
                  @click="onActive(index)"
                  :class="['tab-item',activeIndex == index?'active':'']">{{item.title}}</view>
        </view>
        <scroll-view class="floor-list" scroll-x>
            <view class="scoll-wrapper">
                <view v-for="(item, index) in segmentList[activeIndex].list" :key="index" class="floor-item">
                    <image @click="onPress(item)" :src="item.image" mode="aspectFill"></image>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        props:{
            content:{
                type:String,
                default:''
            },
            segmentList:{
                type:Array,
                default:function () {
                    return [

                    ]
                }
            }
        },
        data() {
            return {
                activeIndex:0
            }
        },
        watch: {},
        methods: {
            onActive(index){
                this.activeIndex = index;
            },
            onPress(item){
                this.$emit('onPress',item)
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 职业素养 */
    .section{
        background: #fff;
        .skill-section-wrap {
            padding: 0 30upx;
        }
        .skill-text {
            font-size: 24upx;
            color: #999;
            margin-bottom: 20upx;
        }
        .skill-tabHead {
            display: flex;
            justify-content: space-between;

            flex-wrap: wrap;
            .tab-item {
                height: 60upx;
                width: 330upx;
                border-radius: 10upx;
                text-align: center;
                line-height: 60upx;
                background-color: #f2f4ff;
                font-size: 28upx;
                color: #333;
                margin-bottom: 25upx;
                &.active {
                    background-color:#3b64ff;
                    color: #fff;
                }
            }
        }
        .floor-list{
            white-space: nowrap;
            padding-bottom: 20upx;
        }
        .scoll-wrapper{
            display:flex;
            align-items: flex-start;
        }
        .floor-item{
            width: 240upx;
            margin-right: 20upx;
            font-size: $font-sm+2upx;
            color: $font-color-dark;
            line-height: 1.8;
            image{
                width: 240upx;
                height: 140upx;
                border-radius: 12upx;
            }
            .price{
                color: $uni-color-primary;
            }
        }
    }
</style>
